<template>
  <div ref="interactionLayer" class="interaction-layer">
    <slot></slot>
    <RecycleScroller
      :items="signs"
      :item-size="50" 
      key-field="id"
      v-slot="{ item }"
    >
      <SignDraggable
        :id="item.id"
        :x="item.x"
        :y="item.y"
        @delete="handleDelete"
        @update:position="handleUpdatePosition"
      >
        {{ item.name }}
      </SignDraggable>
    </RecycleScroller>
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue';
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import SignDraggable from './children/SignDraggable.vue';

const interactionLayer = ref(null);

defineExpose({ interactionLayer });

defineProps({
  signs: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(['delete', 'update:position']);

function handleDelete(id) {
  emit('delete', id);
}

function handleUpdatePosition(position) {
  emit('update:position', position);
}
</script>

<style scoped>
.interaction-layer {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

<style scoped>
.sign-interactor {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>